<template>
  <view class="st-u-comment-enjoy">
    <view class="enjoy-box">
      <view class="enjoy-box-item st-flex" v-for="(item,index) in enjoyDataList" :key="index" @tap="$emit('enjoyItemClick',item)">
        <u-avatar @tap="$emit('avatarClick',item)" :src="item.ownerUserAvatar"></u-avatar>
        <text>{{item.ownerUserNickname}}</text>
      </view>
    </view>

    <stULoadmore ref="loadMore" :ready="loadEnjoyData" @loadmore="loadEnjoyData"></stULoadmore>
  </view>
</template>

<script>

/**
 * 主体对应的点赞列表组件
 */

import CommentEnjoyUrl from "../../../../pc/enjoy/CommentEnjoyUrl.js";
import stULoadmore from '../../../../../../common/web/components/app/uni-app/uview/st-u-loadmore/st-u-loadmore.vue'
export default {
  components: {stULoadmore},
  props: {
    // 主体 id
    subjectId: {
      type: String,
      required: true
    },
    // 分组标识
    groupFlag: {
      type: String
    }
  },
  data(){
    return {
      // 点赞数据
      enjoyDataList: [],
      // 查询参数
      enjoyQuery: {
        current: 1,
        subjectId: this.subjectId,
        groupFlag: this.groupFlag
      }
    }
  },
  methods: {
    // 加载数据
    loadEnjoyData(refresh,callback=()=>{}) {
      if(!refresh && this.$refs.loadMore && !this.$refs.loadMore.canLoad()){
        if(callback){
          callback()
        }
        return
      }
      this.$http.get(CommentEnjoyUrl.getPage1,{params:this.enjoyQuery}).then(res => {
        if (this.enjoyQuery.current == 1) {
          this.enjoyDataList = []
        }
        res.data.records.forEach(item =>{
          this.enjoyDataList.push(item)
        });
        this.enjoyQuery.current = res.data.current + 1
        this.$refs.loadMore.loaded(res.data)
      }).catch((error)=>{
        this.$u.toast('抱歉系统出错误了')
        console.error(error)
        this.$refs.loadMore.loadError()
      }).finally(()=>{
        if(callback){
          callback()
        }
      })
    },
    // 刷新数据
    refreshEnjoyData(callback=()=>{}){
      this.enjoyQuery.current = 1
      this.loadEnjoyData(true,callback)
    }
  }
}
</script>

<style lang="scss" scoped>
.st-u-comment-enjoy{
  .enjoy-box .enjoy-box-item{
    border-bottom: solid 2rpx $u-border-color;
    padding: 20rpx;
  }
}
</style>